<template>
  <div class="home">
    <div>
      <router-link :to="{ name: 'Themes', query: { name: 't-1' } }">
        <div class="theme">
          <img class="theme-img" :src="topimg" />
        </div>
      </router-link>
    </div>
    <!--  -->

    <!-- 轮播广告 -->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="(image, index) in imglist" :key="index">
        <img :src="image.img"
      /></van-swipe-item>
    </van-swipe>

    <!-- 宫格菜单 -->
    <van-grid class="grid" :column-num="3" :border="false">
      <van-grid-item
        v-for="item in categorylist"
        :key="item.id"
        class="iconfont"
        :text="item.name"
        :class="item.img"
        style="font-size: 30px"
        :to="{ name: 'CategoryList', query: { id: item.id, isRoot: true } }"
      ></van-grid-item>
    </van-grid>

    <!-- 商品列表 -->
    <GoodsList ref="goodslist" />

    <nav-bar />
  </div>
</template>

<script>
import GoodsList from "./GoodsList";
import navBar from "@/components/NavBar";
export default {
  name: "Home",
  components: { navBar, GoodsList },
  data() {
    return {
      toptitle: "",
      topname: "",
      topimg: "",
      imglist: [],
      categorylist: [],
    };
  },
  created() {
    this.getImgInfo();
    this.getGridMenu();
  },
  methods: {
    getGridMenu() {
      this.$http.get("category/grid").then((res) => {
        this.categorylist = res.data;
      });
    },
    getImgInfo() {
      this.$http.get("/theme/detail/t-1").then((result) => {
        this.toptitle = result.data.title;
        this.topname = result.data.name;
        this.topimg = result.data.entranceImg;
      });

      //轮播广告
      this.$http.get("/poster/name/p-1").then((res) => {
        this.imglist = res.data.items;
      });
    },
  },
};
</script>
<style scoped>
.grid {
  background: white;
  border-radius: 10px;
  border: 2px solid rgb(60, 41, 46);
  padding-top: 13px;
  margin: 5px 5px;
  height: 140px;
}
.iconfont {
  color: rgb(111, 139, 145);
  width: 2em;
  height: 0em;
}
.home {
  background: rgb(255, 255, 254);
}
.theme {
  height: 100px;
}
.theme-img {
  max-height: 100%;
  width: 100%;
}
.van-swipe-item {
  height: 300px;
}
.van-swipe-item img {
  width: 100%;
  height: 100%;
}
</style>
